{% extends "../layouts/default.html" %}

{% block title %}新增文章 - Markdown{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/public/common/css/github-markdown-css/5.1.0/github-markdown.css" />
    <link rel="stylesheet" href="/public/common/js/bytemd/1.11.0/index.min.css">
    <link rel="stylesheet" href="/public/common/js/highlight.js/11.5.1/github-dark.min.css" />
    <script src="/public/common/js/bytemd/1.11.0/zh_Hans.js"></script>
    <script src="/public/common/js/bytemd/1.11.0/index.min.js"></script>
    <script src="/public/common/js/highlight.js/11.5.1/highlight.min.js"></script>
    <style>
        body{
            background-color:#fff;
        }
        #editor{
            margin:0;
            height:100%;
            font-family:"Helvetica Neue", Arial, sans-serif;
            color:#333;
        }
        .app-md-markarea, .editor-container{
            display:inline-block;
            width:calc(50% - 3px);
            height:100%;
            vertical-align:top;
            box-sizing:border-box;
        }
        .app-md-markarea{
            border:none;
            border-right:1px solid #e1e4e8;
            resize:none;
            outline:none;
            background-color:#f6f6f6;
            font-size:14px;
            font-family:"Monaco", courier, monospace;
            min-height:calc(100vh - 65px);
        }
        .app-md-form code{
            /* color:#f66; */
        }
        #editor div.editor-container{
            height:calc(100vh - 65px);
            overflow-y:auto;
            padding:20px 15px;
        }
        .app-md-form ::-webkit-scrollbar{
            display:block;
        }
        .bytemd{
            height:calc(100vh - 60px);
            border:0;
        }
        .bytemd-editor{
            width:100% !important;
        }
        .bytemd-preview{
            display:none;
        }
        .bytemd-editor .CodeMirror .CodeMirror-lines{
            max-width:100%;
        }
        .markdown-body pre {
            margin-bottom: 10px;
        }
    </style>
{% endblock %}

{% block content %}
    <div id="app">
        <el-form ref="modelForm" class="app-md-form" :model="modelForm" :rules="rules">
            <div class="app-md-header">
                <div class="app-md-title">
                    <el-form-item prop="title">
                        <el-input v-model="modelForm.title" maxlength="100" autocomplete="off" placeholder="请输入标题，您可以输入100个字" class="title-input" />
                    </el-form-item>
                </div>
                <div class="app-md-action">
                    <el-button size="medium" @click="toggleDrawer()">设置</el-button>
                    <el-button size="medium" type="primary" @click="drawer = true">发布</el-button>
                    <el-tooltip class="item" effect="dark" content="切换富文本编辑器">
                        <el-button size="medium" @click="toEditor()"><i class="fa fa-exchange"></i></el-button>
                    </el-tooltip>
                </div>
            </div>
            <div id="editor" class="app-md-editor markdown-body">
                <app.mdeditor class="app-md-markarea" :value="input" :locale="zh_Hans" :plugins="plugins" @change="handleChange"></app.mdeditor>
                <textarea :value="input" class="app-md-markarea" style="display:none;" @input="update"></textarea>
                <div class="editor-container" v-html="compiledMarkdown"></div>
            </div>
            <keep-alive>
                <el-drawer title="设置" :visible.sync="drawer">
                    <div class="app-md-drawer">
                        <el-collapse v-model="activeCollapse">
                            <el-collapse-item title="文章状态" name="1">
                                <el-checkbox v-model="modelForm.status" :true-label="2" :false-label="1">保存草稿</el-checkbox>
                            </el-collapse-item>

                            <el-collapse-item title="文章类型" name="2">
                                <el-form-item prop="catid">
                                    <el-select v-model="modelForm.catid" style="width:100%" placeholder="请选择文章分类">
                                        <el-option v-for="item in categoryList" :key="item.colId" :label="item.colTitle" :value="item.colId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-collapse-item>

                            <el-collapse-item title="摘要" name="3">
                                <el-form-item prop="description" label-width="0">
                                    <el-input v-model="modelForm.description" type="textarea" placeholder="请选择摘要" maxlength="300" :rows="5" show-word-limt autosize />
                                </el-form-item>
                            </el-collapse-item>

                            <el-collapse-item title="地址" name="4">
                                <el-form-item prop="source_url" label-width="0">
                                    <el-input v-model="modelForm.source_url" type="text" placeholder="原文地址" maxlength="300" :rows="5" show-word-limt autosize />
                                </el-form-item>
                            </el-collapse-item>


                            <div class="app-drawer-footer">
                                <el-button @click="drawer = false">取消</el-button>
                                <el-button type="primary" @click="onSave">提交</el-button>
                            </div>
                        </el-collapse>
                    </div>
                </el-drawer>
            </keep-alive>
        </el-form>
    </div>
{% endblock %}
{% block script %}
    {% include "../components/mdeditor.html" %}
    <script src="/public/common/js/marked/3.0.8/marked.min.js"></script>
    <script>
        var vm = app.vue({
            el: '#app',
            data() {
                return {
                    id: '',
                    drawer: false,
                    input: '',
                    value: '# Hello, world!',
                    plugins: [],
                    modelForm: {
                        author: '',
                        avatar: '',
                        title: '',
                        md: '',
                        content: '',
                        catid: '',
                        status: 1,
                        source_url: '',
                    },
                    rules: {
                        title: [
                            { required: true, message: '请输入标题名称', trigger: 'blur' },
                            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                        ],
                        catid: [{ required: true, message: '请请选择类别', trigger: ['blur', 'change'] }],
                        description: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
                        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    },
                    categoryList: [],
                    activeCollapse: ['1', '2', '3'],
                }
            },
            computed: {
                compiledMarkdown() {
                    return marked(this.input, { sanitize: true })
                }
            },
            created() {
                this.init()
                this.getUrlParams()
                this.id && this.getDetail()
                this.getCategoryList()
            },
            mounted() {
                this.setHighlight()
            },
            methods: {
                getUserInfo() {
                    return app.admin.getUserInfo()
                },
                init() {
                    var useInfo = this.getUserInfo()
                    this.modelForm.author = useInfo?.nickname
                    this.modelForm.avatar = useInfo?.avatar
                },
                handleChange(v) {
                    this.input = v

                    this.setFields()
                    this.setHighlight()
                },
                setHighlight() {
                    this.$nextTick(() => {
                        hljs.highlightAll()
                    })
                },
                getUrlParams() {
                    const params = app.getParams()
                    this.id = params?.id
                },
                getDetail() {
                    app.request({
                        method: 'get',
                        url: `article/${this.id}`,
                    }).then((res) => {
                        this.modelForm = res?.data?.rows
                        this.input = this.modelForm.md
                        setTimeout(() => {
                            this.tableLoading = false
                        }, 80)
                    })
                },
                // 获取文章分类
                getCategoryList() {
                    app.request({
                        method: 'get',
                        url: 'article/category/list',
                        params: this.queryForm,
                    }).then((res) => {
                        const rows = res?.data?.rows

                        if (rows?.length) {
                            this.categoryList = rows.filter(item => item.colId !== 4)
                        }
                    })
                },
                update: _.debounce(function (e) {
                    this.input = e.target.value
                    this.setFields()
                }, 300),
                setFields() {
                    this.modelForm.md = this.input
                    this.modelForm.content = window.marked(this.input, { sanitize: true })
                },
                onSave() {
                    !this.id ? this.createData() : this.updateData()
                },
                // 保存
                createData() {
                    this.$refs.modelForm.validate(valid => {
                        if (valid) {
                            app.request({
                                method: 'post',
                                url: 'article/insert',
                                data: this.modelForm,
                            }).then(() => {
                                this.handleClose()

                                this.$notify({
                                    title: 'Success',
                                    message: '新增成功',
                                    type: 'success',
                                    duration: 2000
                                })
                            })
                        }
                    })
                },
                updateData() {
                    this.$refs.modelForm.validate(valid => {
                        if (valid) {
                            this.onUpdate()
                        }
                    })
                },
                onUpdate() {
                    app.request({
                        method: 'put',
                        url: 'article/update',
                        data: this.modelForm,
                    }).then(() => {
                        this.editVisible = false
                        this.handleClose()

                        this.$notify({
                            title: 'Success',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                },
                toggleDrawer() {
                    this.drawer = !this.drawer
                },
                toEditor() {
                    window.open('/admin/article/edit')
                },
                handleClose(done) {
                    this.$refs.modelForm && this.$refs.modelForm.resetFields()
                    this.$set(this, 'modelForm', this.$options.data().modelForm)
                    this.input = ''

                    done && done()
                },
            }
        })
    </script>
{% endblock %}